<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
    <title>_收货KPI报表</title>
    <script type="text/javascript">
		var datatable_content;
        var filterParam = {};
        
        $(function () {
            $("#Time").daterangepicker({
                format: 'YYYY-MM-DD',
                dateLimit:{days : 100}
            });
        });

        function initTable() {
            datatable_content = $("#contentTable").dataTable({
                "bServerSide": true,
                "sAjaxSource": '${ctx}/kpiReceive/quer',
                "fnServerData": callback,
                "fnRowCallback": rowCallBack,
                "bFilter": false,
                "aLengthMenu": [20, 50, 100],
                "bSort": false,
                "sZeroRecords": "查询无记录！",
                "bProcessing": true,
                "oLanguage": {
                    "sUrl": '${ctx}/static/v2/js/plugins/datatables/cn.txt'
                },
                "scrollX": true,
                "autoWidth": false,
                "aoColumns": [{
                    "mData": null
                }, {
                    "mData": "入库单号",
                    "sDefaultContent": ""
                }, {
                    "mData": "单据类型",
                    "sDefaultContent": ""
                }, {
                    "mData": "状态",
                    "sDefaultContent": ""
                }, {
                    "mData": "仓库名称",
                    "sDefaultContent": ""
                }, {
                    "mData": "客户名称",
                    "sDefaultContent": ""
                }, {
                    "mData": "SKU数量",
                    "sDefaultContent": ""
                }, {
                    "mData": "总数量",
                    "sDefaultContent": ""
                }, {
                  "mData": "上架SKU数量",
                  "sDefaultContent": ""
                }, {
                  "mData": "上架数量",
                  "sDefaultContent": ""
                }, {
                    "mData": "登记时间",
                    "sDefaultContent": ""
                }, {
                    "mData": "点收日期",
                    "sDefaultContent": ""
                }, {
                    "mData": "开始点收时间",
                    "sDefaultContent": ""
                }, {
                    "mData": "点收结束时间",
                    "sDefaultContent": ""
                }, {
                    "mData": "点收操作人",
                    "sDefaultContent": ""
                }, {
                    "mData": "上架任务创建时间",
                    "sDefaultContent": ""
                }, {
                    "mData": "上架任务完成时间",
                    "sDefaultContent": ""
              	}, {
                    "mData": "上架操作人",
                    "sDefaultContent": ""
              	}, {
                    "mData": "创建日期",
                    "sDefaultContent": ""
              	}],
              	"aoColumnDefs":[{
                    "aTargets": [10],
	                "mRender": function (data, display, row) {
                        var rowTime=row['登记时间'];
                        if(rowTime==null){
                            return "";
                        }else {
                            return new Date(rowTime).Format("yyyy-MM-dd hh:mm:ss");
                        }
		        	}
                }, {
                    "aTargets": [11],
		            "mRender": function (data, display, row) {
                        var rowTime=row['点收日期'];
                        if(rowTime==null){
                            return "";
                        }else {
                            return new Date(rowTime).Format("yyyy-MM-dd");
                        }
			        }
                }, {
                    "aTargets": [12],
  		            "mRender": function (data, display, row) {
                        var rowTime=row['开始点收时间'];
                        if(rowTime==null){
                            return "";
                        }else {
                            return new Date(rowTime).Format("yyyy-MM-dd hh:mm:ss");
                        }
  			        }
                }, {
                    "aTargets": [13],
  		            "mRender": function (data, display, row) {
                        var rowTime=row['点收结束时间'];
                        if(rowTime==null){
                            return "";
                        }else {
                            return new Date(rowTime).Format("yyyy-MM-dd hh:mm:ss");
                        }
  			        }
                }, {
                    "aTargets": [15],
  		            "mRender": function (data, display, row) {
                        var rowTime=row['上架任务创建时间'];
                        if(rowTime==null){
                            return "";
                        }else {
                            return new Date(rowTime).Format("yyyy-MM-dd hh:mm:ss");
                        }
  			        }
                }, {
                    "aTargets": [16],
  		            "mRender": function (data, display, row) {
                        var rowTime=row['上架任务完成时间'];
                        if(rowTime==null){
                            return "";
                        }else {
                            return new Date(rowTime).Format("yyyy-MM-dd hh:mm:ss");
                        }
  			        }
                }, {
                    "aTargets": [18],
  		            "mRender": function (data, display, row) {
                        var rowTime=row['创建日期'];
                        if(rowTime==null){
                            return "";
                        }else {
                            return new Date(rowTime).Format("yyyy-MM-dd hh:mm:ss");
                        }
  			        }
                }]
            });
        }

        function query() {
            //验证，如果选了时间必须选时间类型
            if ($("#queryForm").valid()) {
                if (datatable_content) {
                    datatable_content.fnDestroy();
                }
                initTable();
            }
        }

        /**
         *构造查询条件
         */
        function callback(sSource, aoData, fnCallback) {
          	initFormData();
            var formParam = $("#queryForm").serializeArray();
            for (var n in filterParam) {
                formParam.push(filterParam[n]);
            }
            var jsondata=arrayToJson(aoData.concat(formParam));
            $.ajax({
                "type": "post",
                "url": sSource,
                "dataType": "json",
                "data": jsondata,
                "success": fnCallback
            });
        }
        
        function initFormData(){
        	changTime($('#Time'));
        }

        /**
         *创建了行的回调
         *nRow为当前的tr
         */
        function rowCallBack(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            var iDisplayStart = datatable_content.fnSettings()._iDisplayStart;
            $("td:eq(0)", nRow).html(iDisplayStart + iDisplayIndex + 1);
        }
        
        /**
        *	将json数组转换为json对象
        */
        function arrayToJson(array) {
        	var jsonParam = {};
            for (var i = 0; i < array.length; i++) {
            	jsonParam[array[i].name] = array[i].value;
          	}
          	return jsonParam;
      	}

        /**
         *构造下载excel的请求
         */
        function exportExcel() {
            if ($("#queryForm").valid()) {
              	initFormData();
                $("#queryForm").submit();
            }
        }
        
        /*
        *	在表中增加需要的input
        */
        function changTime(inputDate){
          	var tid=inputDate.attr("name");
          	var tvalue=inputDate.val();
          	if(typeof(tvalue) == "undefined" || tvalue == ''){
          	  return;
          	}
          	var times=tvalue.split(" - ");
        	var fromDate="<input type='hidden' name='from"+tid+"' id='from"+tid+"' value='"+times[0]+"'/>";
        	var toDate="<input type='hidden' name='to"+tid+"' id='to"+tid+"' value='"+times[1]+"'/>";
        	var inputSub=inputDate.nextAll().length;
        	if(inputSub>1){
        	  inputDate.nextAll().remove();
        	}
        	inputDate.parent().append(fromDate);
        	inputDate.parent().append(toDate);
        }
        
    </script>
</head>

<body>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-solid box-primary">
                <div class="box-header">
                    <i class="fa fa-search"></i>
                    <h3 class="box-title">搜索栏 收货KIP报表</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-primary btn-sm" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <form class="form-search" id="queryForm" action="${ctx}/kpiReceive/exportExcel" method="post">
                        <div class="form-group row">
                            <div class="col-sm-3">
                                <div class="input-textgroup col-sm-12">
                                    <label class="input-group-text">时间:</label>
                                    <input type="text" name="Time" id="Time" class="form-control required"/>
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <div class="input-textgroup col-sm-12">
                                    <span class="input-group-text">操作员：</span>
                                    <select name="opName" id="opName" class="form-control">
	                                    <option value=""></option>
	                                    <c:forEach items="${opNameList}" var="op">
	                                        <option value="${op}">${op}</option>
	                                    </c:forEach>
                                	</select>
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <div class="input-group col-sm-12">
                                    <label class="input-group-text">类型:</label>
                                    <select name="opType" id="opType" class="form-control">
                                        <option value=""></option>
                                        <option value="登记">登记</option>
                                        <option value="点收">点收</option>
                                        <option value="上架">上架</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-sm-3">
                                <div class="input-group col-sm-12">
                                    <button class="btn btn-info" type="button" onclick="query();">搜索</button>
                                    <button class="btn btn-primary" type="button"
                                            onclick="exportExcel();">导出报表
                                    </button>
                                </div>
                            </div>

                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header"></div>
                <div class="box-body">
                    <table id="contentTable" style="white-space: nowrap;"
                           class="table table-striped table-bordered table-condensed">
                        <thead>
	                        <tr>
	                            <th>序号</th>
	                            <th>入库单号</th>
	                            <th>单据类型</th>
	                            <th>状态</th>
	                            <th>仓库名称</th>
	                            <th>客户名称</th>
	                            <th>SKU数量</th>
	                            <th>总数量</th>
	                            <th>上架SKU数量</th>
	                            <th>上架数量</th>
	                            <th>登记时间</th>
	                            <th>点收日期</th>
	                            <th>开始点收时间</th>
	                            <th>点收结束时间</th>
	                            <th>点收操作人</th>
	                            <th>上架任务创建时间</th>
	                            <th>上架任务完成时间</th>
	                            <th>上架操作人</th>
	                            <th>创建日期</th>
	                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>
